<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<jsp:include page="/WEB-INF/jsp/inc/include-easyUI.jsp"></jsp:include>
	<!-- 弹出框 -->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.css">
	<script src="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.min.js"></script>
	
	<script src="${pageContext.request.contextPath}/static/plugins/js/outlook2.js" type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/js/validDate.js"></script>
	
	<!-- 时间选择器 -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/skin/jedate.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/jedate.js"></script>
    
<style type="text/css">
.btn {
	height: inherit;
	border: 0;
}


</style>
</head>
<body>

	<div class="main-content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
 				try { 
 					ace.settings.check('breadcrumbs', 'fixed') 
 				} catch (e) { 
 				} 
			</script> 
			<ul class="breadcrumb">
				<li class="active">消费统计管理</li>
			</ul>
		</div>
		<div class="page-content">
<!-- 			<div class="page-header" style="margin: 0px;float: left;"> -->
<!-- 				<h1>用户管理</h1> -->
<!-- 			</div> -->
			<!-- /.page-header -->
			
			<div>
				<div class="col-xs-12 col-sm-12">
					<!-- 搜索form -->
					<form id="searchUserForm" action="" class="form-horizontal" role="form" >
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-1 control-label no-padding-right" for="search-countDatetime"> 时间 </label>
							<div class="col-sm-9">
								<input type="text" id="search-countDatetime" name="countDatetime" 
									placeholder="时间" class="col-xs-4 col-sm-5" readonly="true"/>
								<div id="getBeginTime"></div>
								
								<div class="col-sm-3">
									<input type="text" name="consumeUserIds" id="consume-consumeUserIds" placeholder="消费人员" class="form-control" 
										style="height:30px;margin-left: 50px;"/>
								</div>
								
								<div>
			                        <button type="button" id="btn-search" class="btn btn-primary start" style="margin-left: 100px;">
					                    <i></i>
					                    <span>搜索</span>
					                </button>
					                <button type="reset" id="btn-reset" class="btn btn-warning cancel" style="margin-left: 20px;">
					                    <i></i>
					                    <span>取消</span>
					                </button>
	                           </div>
							</div>
							
						</div>
						<div class="space-4"></div>
					</form>
					
				</div><!-- /.col -->
			</div><!-- /.row -->
			
			<div id="content" region="center" title="消费统计" style="overflow: hidden">
			</div>
			<table id="consumeCountList" border="false" width="100%" height="450px">
			</table>
			
			<!-- /.page-header -->
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div><!-- /.main-content -->
	<script type="text/javascript">
		jeDate({
			dateCell:"#search-countDatetime",//直接显示日期层的容器，可以是ID  CLASS
			format:"YYYY-MM",//日期格式
			isinitVal:false, //是否初始化时间
			festival:false, //是否显示节日
			isTime:true, //是否开启时间选择
			minDate:"2017-06-01 00:00:00",//最小日期
			maxDate:jeDate.now(0), //设定最大日期为当前日期
		});
		var consumeCountGrid;
        $(function () {
            consumeCountGrid = $("#consumeCountList").datagrid({
                url: '${pageContext.request.contextPath}/admin/consumeCount/getList',
                rownumbers: true,
                fitColumns:true,
                idField: 'id',
                onLoadError:function(data){
                	
                },
                frozenColumns: [[{
                    title: 'id',
                    field: 'id',
                    width: 50,
                    checkbox: true,
                    hidden : true
                }]],
                columns: [[ {
                    field: 'userName',
                    title: '用户名',
                    width: 100,
                }, {
                    field: 'countDate',
                    title: '统计时间',
                    width: 100,
                }, {
                    field: 'totalPaid',
                    title: '总付款',
                    width: 100
                }, {
                    field: 'averagePaid',
                    title: '人均消费',
                    width: 100
                }, {
                    field: 'totaliIncome',
                    title: '收入 ',
                    width: 100
                }, {
                    field: 'totalExpenditure',
                    title: '支出 ',
                    width: 100
                }
                ]],
            });
           
            $("#consume-consumeUserIds").combobox({
        	    url:'${pageContext.request.contextPath}/admin/sys/user/getUserComboList?userId=0',
        	    valueField:'value',
        	    textField:'text',
        	    multiple:true,
        	});
            
            //快速搜索按钮
    		$('#btn-search').click(function(){
    		   	consumeCountGrid.datagrid('unselectAll');
               	var countDatetime = $('#search-countDatetime').val();
               	var consumeUserIds = $("#consume-consumeUserIds").combobox('getValues');
    			consumeCountGrid.datagrid('load', {
    				countDatetime : countDatetime,
    				consumeUserIds : consumeUserIds.join(",")
    			});
    		});
            $('#btn-reset').click(function(){
            	 $("#consume-consumeUserIds").combobox('clear');
            })
        });
     
        function reloadDataGrid() {
            consumeCountGrid.datagrid('clearChecked');
            consumeCountGrid.datagrid('reload');
        }

		
	</script>	
  </body>
</html>
